//用卡量/注册量
<template>
  <div class="EchartData" :status="siderOpened" style="width:100%;height:100%;"></div>
</template>
<script>
import echarts from "echarts";
import { debounce } from "@/utils";
export default {
  name: "EchartData",
  data() {
    return {
      chart: null,
      echartsData: { xData: [], yData1: [], yData2: [] },
      // xData: ["7-6", "7-7", "7-8", "7-9", "7-10", "7-11", "7-12"],
      // yData1: [100, 200, 33, 55, 22, 55, 11],
      // yData2: [34, 66, 2, 88, 36, 42, 101],
      commonStyle: {
        //刻度线每个刻度的样式
        axisTick: {
          lineStyle: {
            color: "#0e155e"
          }
        },
        //刻度轴线的样式
        axisLine: {
          lineStyle: {
            color: "#0e155e"
          },
          textStyle: {
            color: "red"
          }
        },
        //刻度线对应的文字的样式
        axisLabel: {
          color: "#44a3d8",
          fontSize: "8",
          interval: false
        }
      }
    };
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.chart.setOption({
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 70,
            height: 6,
            bottom: 6,
            backgroundColor: "rgba(87,97,174,1)",
            fillerColor: "rgba(122, 238, 252, 1)",
            // handleStyle:{
            //     color:'pink'
            // },
            textStyle: {
              color: "#44a3d8"
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["用卡量", "注册量"],
          top: "6%",
          textStyle: {
            color: "auto"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "6%",
          containLabel: true
        },
        xAxis: [
          {
            data: this.echartsData.xData,
            ...this.commonStyle
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "用卡量/注册量",
            axisLabel: {
              formatter: "{value}"
            },
            ...this.commonStyle,
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                show: false,
                color: ["#0e155e"],
                width: 1,
                type: "solid"
              }
            },
            //坐标轴名称的文字样式
            nameTextStyle: {
              color: "transparent"
            }
          }
        ],
        series: [
          {
            name: "用卡量",
            type: "bar",
            data: this.echartsData.yData1,
            barMaxWidth: "10px",
            itemStyle: {
              border: "0",
              color: "rgba(122, 238, 252, 1)"
            }
          },
          {
            name: "注册量",
            type: "bar",
            data: this.echartsData.yData2,
            barMaxWidth: "10px",
            itemStyle: {
              border: "0",
              color: "rgba(161, 133, 219, 1)"
            }
          }
        ]
      });
    }
  },
  computed: {
    siderOpened() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.__resizeHandler();
        }, 300);
      });
      return this.$store.state.app.sidebar.opened;
    }
  }
};
</script>